<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
     
    </div>

    <script>
        let app = {
            type: 'div',
            props: {
                className: 'box',
                children: [{
                        type: 'h2',
                        props: {
                            className: 'h_2',
                            children: ['这是一段标题']
                        }
                    },
                    {
                        type: 'p',
                        props: {
                            className: 'p1',
                            children: [{
                                    type: 'input',
                                    props: {
                                        style : 'width:200px;',
                                        className: 'inp',
                                        placeholder: '北京',
                                        type: 'text',
                                      
                                    }
                                },
                                {
                                    type: 'button',
                                    props: {
                                        className: 'btn',
                                        style : 'background:skyblue;color:#fff;',
                                        children: ['搜索']
                                    }

                                }
                            ]
                        }
                    },
                    {
                        type: 'input',
                        props: {
                            className: 'inp',
                            type: 'checkbox',
                            checked : 'checked'
                        }
                    },
                    {
                        type: 'input',
                        props: {
                            className: 'inp',
                            type: 'checkbox',
                       
                        }
                    },
               
                    {
                        type: 'a',
                        props: {
                            className: 'navitem',
                            href: 'https://www.baidu.com/',
                            children: ['百度链接']
                        }
                    }
                ]
            }
        }

        const render = (app, root) => {

            const createElement = (app, root) => {

                let cur = null

                if (typeof app == 'string') {
                    cur = window.document.createTextNode(app)
                } else {
                    let {
                        type,
                        props
                    } = app

                    cur = window.document.createElement(type) //创建元素

                    Object.keys(props).map(item => {
                        switch (item) {
                            case 'style' :
                                cur.setAttribute('style', props[item])
                                break;

                            case 'className':
                                cur.setAttribute('class', props[item]) //创建class属性

                                break;

                            case 'type':
                                cur.setAttribute('type', props[item])
                                if(props[item] !== 'checkbox'){
                                    cur.setAttribute('placeholder', props['placeholder'])
                                }

                                if(props['checked']) {
                                    cur.setAttribute('checked', props['checked'])
                                }
                                
                           
                                break;

                            case 'href':
                                cur.setAttribute('href', props[item])

                                break;

                            case 'children':
                                if (Array.isArray(props[item])) {
                                    props[item].map(val => {
                                        createElement(val, cur)
                                    })
                                }

                                break;

                            default:
                                break;

                        }
                    })
                }

                root.append(cur) //页面添加
            }

            createElement(app, root)
        }
        render(app, document.querySelector('#root'))
    </script>
</body>

</html>